import React from "react";
import { Flex, Splitter, Typography } from "antd";

function HomeT() {
  const Desc: React.FC<Readonly<{ text?: string | number }>> = (props) => (
    <Flex justify="center" align="center" style={{ height: "100%" }}>
      <Typography.Title
        type="secondary"
        level={5}
        style={{ whiteSpace: "nowrap",color:'#fff' }}
      >
        {props.text}
      </Typography.Title>
    </Flex>
  );

  return (
    <div>
      <Splitter
        style={{ height: 200, boxShadow: "0 0 10px rgba(0, 0, 0, 0.1)", }}
      >
        <Splitter.Panel defaultSize="40%" min="20%" max="70%" style={{background:'#f00'}}>
          <Desc text="左" />
        </Splitter.Panel>
        <Splitter.Panel style={{background:'#000'}}>
          <Desc text="右" />
        </Splitter.Panel>
      </Splitter>
    </div>
  );
}

export default HomeT;
